<template>
  <div class="weapon-list-item pd10 bd-line mask">
    <div class="left row bottom-line">
      <div class="sprite col6 flex pd10 flex-vcenter flex-hcenter">
        <img :src="sprite" alt="">
      </div>
      <div class="name col12 flex flex-vcenter flex-hcenter left-line">{{name}}</div>
      <div class="col6 left-line flex flex-vcenter flex-hcenter">
        <Button type="primary" title="操作" @click="itemClick">
          <i class="iconfont icon-mzicon-setting"></i>
        </Button>
      </div>
    </div>
    <div class="right">
      <div class="damage row">
        <div class="item col5">伤</div>
        <div class="item col9 left-line">海：{{ocean}}</div>
        <div class="item col9 left-line">陆: {{land}}</div>
        <div class="item col9 left-line">空: {{air}}</div>
      </div>
      <div class="info row top-line">
        <div class="item col12">命中：{{hitRate}}</div>
        <div class="item col12 left-line">射程：{{range}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import Button from '../../common/Button.vue'
export default {
  emits:['select'],
  props:['data'],
  components:{Button},
  setup(props,context) {
    // console.log(props.data);
    const state = reactive({
      ...props.data
    })

    const itemClick = ()=>{
      context.emit('select',state)
    }

    return {
      ...toRefs(state),itemClick
    }
  },
}
</script>
<style lang="less" scoped>
  @import '../../../theme.less';
.weapon-list-item {
  border-radius: 6px;
  width: 260px;
  font-size:12px;
  .left {
    .sprite {
      img {
        width: 30px;
      }
    }
  }
  .item {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>